<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	template="/WEB-INF/template/template-interno1.xhtml">
	<f:metadata>
		<f:viewParam name="user" value="#{perfilBean.idUsuario}" />
	</f:metadata>
	<ui:define name="conteudo-principal">

		<div class="perfil-cabecalho">
			<div style="float: left;">
				<p:panel id="panel-foto" style="padding:0 !important">
					<p:graphicImage id="fotoH" height="128" style="background: white;"
						rendered="#{perfilBean.usuario.genero eq 'MASCULINO'}"
						url="/resources/img/homem.png" />
					<p:graphicImage id="fotoM" height="128" style="background: white;"
						rendered="#{perfilBean.usuario.genero eq 'FEMININO'}"
						url="/resources/img/mulher.png" />
				</p:panel>
			</div>
			<div style="float: left; margin-left: 30px">
				<p:outputLabel value="Nome: #{perfilBean.usuario.nome}" />
				<br /> <br />
				<p:outputLabel value="Idade: #{perfilBean.usuario.idade}" />
				<br /> <br />
				<p:outputLabel value="Aniversário: " />
				<p:outputLabel id="outPutData"
					value="#{perfilBean.usuario.dataNascimento}" />
				<br /> <br />
				<p:outputLabel
					value="Gênero: #{perfilBean.usuario.genero.descricao}" />
			</div>
			<div style="float: left; margin-left: 30px">
				<p:outputLabel value="Mora em: Recife" />
				<br /> <br />
				<p:outputLabel value="Profissão: Juiz de futebol" />
				<br /> <br />
			</div>
		</div>
		<div class="green-line" />
		<div style="min-width: 900px">
			<div
				style="background: white; float: left; width: 68%; min-width: 400px;">
				<h:panelGroup id="panelRelatos">
					<h:panelGrid columns="3" cellpadding="6">
						<ui:remove>
							<p:commandButton value="Linha do Tempo"
								disabled="#{perfilBean.tipoExibicao eq 'LINHA_DO_TEMPO'}"
								action="#{perfilBean.setExibicao('LINHA_DO_TEMPO')}"
								update="panelRelatos" style="width: 160px" />
						</ui:remove>
						<p:commandButton value="Relatos"
							disabled="#{perfilBean.tipoExibicao eq 'RELATOS'}"
							action="#{perfilBean.setExibicao('RELATOS')}"
							update="panelRelatos" />
						<p:commandButton value="Conselhos"
							disabled="#{perfilBean.tipoExibicao eq 'CONSELHOS'}"
							action="#{perfilBean.setExibicao('CONSELHOS')}"
							update="panelRelatos" />
					</h:panelGrid>
					<p:dataGrid id="dataGridRelatos" var="relato" style="width: 100%"
						value="#{perfilBean.relatosParaExibicao}" paginator="true"
						rows="20" rowsPerPageTemplate="20" lazy="true" columns="1"
						paginatorAlwaysVisible="false"
						emptyMessage="Essa pessoa ainda não compartilhou experiências desse tipo">
						<ui:include src="/WEB-INF/include/relato.xhtml">
							<ui:param name="relato" value="#{relato}" />
						</ui:include>
					</p:dataGrid>
				</h:panelGroup>
			</div>

			<div style="float: right; padding: 20px; width: 200px;"
				align="center">
				<p:outputLabel value="MEDALHAS PESSOAIS" style="font-weight: bold;" />
				<b>PARTICIPAÇÃO</b>
				<p:separator />
				#{perfilBean.relatosTotais} relatos <br />
				#{perfilBean.conselhosTotais} conselhos <br />
				<p:separator />
				<br /> <br />
				<p:separator />
				<b>TITULAÇÕES</b>
				<p:separator />
				Nível atual:<br/>
				<b>#{perfilBean.nivelUsuario}</b> <br/> <br/>
				Área atuante:<br/> 
				<b>#{perfilBean.areaInteresse}</b>
				<p:separator />
			</div>
		</div>
	</ui:define>
</ui:composition>